<template>
  <view>
    <view class="overview-wrap" :style="balanceBg">
      <view class="line-wrap">
        <view class="text">账户余额（元）</view>
        <button type="default" class="global-color-text" @click="rechargeChange">
          充值
        </button>
      </view>
      <view class="line-wrap">
        <view class="value">{{ money || '0.00' }}</view>
        <view v-if="rechargeProcessBalance" class="add">+{{rechargeProcessBalance}} 处理中</view>
      </view>
    </view>
    <view>
      <view class="list-wrap font-15">
        <view class="list-cell list-cell-arrow" @click="handleToTransaction">
          <view class="menu-item-box">
            <view class="iconfont icon-jiaoyijilu menu-icon"></view>
            <view>交易记录</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { getWalletData } from '@/api/system/wallet.js';
  import { toast } from '@/utils/common';
  import config from '@/config';

  export default {
    data() {
      return {
        money: '0.00',
        rechargeProcessBalance: '',
      };
    },
    computed: {
      balanceBg() {
        if (this.$store.state.user.curTypeColor == '#D22C2C') {
          return `background: url(${config.baseImgUrl}/balance-red-bg.png) no-repeat;background-size: cover;`;
        } else {
          return `background: url(${config.baseImgUrl}/balance-bg.png) no-repeat;background-size: cover;`;
        }
      }
    },
    mounted() {
      this.getWalletData();
    },
    onPullDownRefresh() {
      this.getWalletData();
    },
    methods: {
      async getWalletData() {
        const res = await getWalletData();
        if (res?.code === 0) {
          this.money = ((res?.data?.balance || 0) / 100).toFixed(2);
          if (res?.data?.rechargeProcessBalance) {
            this.rechargeProcessBalance = (res?.data?.rechargeProcessBalance / 100).toFixed(2)
          } else {
            this.rechargeProcessBalance = ''
          }
        } else {
          toast(res.msg || '接口查询失败');
        }
        wx.stopPullDownRefresh();
      },
      rechargeChange() {
        this.$tab.navigateTo('/packageB/pages/mine/my-wallet/recharge');
      },
      handleToTransaction() {
        this.$tab.navigateTo('/packageB/pages/mine/transactions/transactions');
      }
    }
  };
</script>
<style lang="scss" scoped>
  .overview-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 266.67rpx;
    padding: 35.56rpx;
    margin: 35.56rpx 24.89rpx;
    border-radius: 14.22rpx;

    button[type='default'] {
      margin: 0 !important;
      height: 58.67rpx !important;
      padding: 0 50rpx !important;
      line-height: 58.67rpx !important;
      border-radius: 23px !important;
      background-color: #fff !important;
      box-shadow: 0px 3px 4px 0px rgba(8, 46, 181, 0.3) !important;
    }

    .line-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #ffffff;

      .text {
        font-size: 26.67rpx;
      }

      .value {
        font-size: 67.56rpx;
        font-weight: 700;
      }

      >view {
        line-height: 100rpx;
      }

      .add {
        font-size: 42.67rpx;
        color: #FFDF10;
      }
    }
  }

  .list-wrap {
    margin: 15px;
    background: #fff;
    border-radius: 20rpx;

    .menu-item-box {
      display: flex;
      align-items: center;

      .iconfont {
        top: 0;
      }
    }
  }
</style>